<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="title"><i class="el-icon-caret-right" /> 选择单位</div>
        <div>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="20" class="call-container">
        <div class="user-list">
          <div class="title">
            <i class="el-icon-caret-right" />
            选择人员
            <div class="tools">
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-s-tools"
                @click="handleCallSet"
                >呼叫设置
              </el-button>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-phone"
                :disabled="selectedUsers.length <= 0"
                @click="handleBatchCall"
                >批量拨打
              </el-button>
            </div>
          </div>
          <div class="log-content">
            <el-table
              v-loading="loading"
              :data="bookData"
              size="mini"
              @selection-change="handleSelectionChange"
              row-key="userId"
            >
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
              >
              </el-table-column>
              <el-table-column label="姓名" align="center" prop="nickName" />
              <el-table-column label="岗位" align="center" prop="postName" />
              <el-table-column label="手机号" align="center" prop="phonenumber">
                <template slot-scope="scope">
                  <div v-if="scope.row.phonenumber != null">
                    {{ scope.row.phonenumber }}
                    <el-button
                      type="text"
                      @click="callNumber(scope.row.phonenumber)"
                      >拨打</el-button
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="电话" align="center" prop="tel">
                <template slot-scope="scope">
                  <div v-if="scope.row.tel != null">
                    {{ scope.row.tel }}
                    <el-button type="text" @click="callNumber(scope.row.tel)"
                      >拨打</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="userQueryForm.pageNum"
              :limit.sync="userQueryForm.pageSize"
              @pagination="getUsers"
            />
          </div>
        </div>
        <div class="call-panel">
          <div class="title"><i class="el-icon-caret-right" /> 拨号盘</div>
          <div class="mobile-box">
            <div class="mobile-control" v-if="telStatus == 0">
              <div class="number">
                <input type="text" v-model="inputNumber" disabled />
                <el-button
                  type="primary"
                  icon="el-icon-error"
                  @click="clearInputNumber"
                ></el-button>
              </div>
              <div class="btns">
                <div
                  class="btn-item"
                  v-for="(item, index) in btns"
                  :key="index"
                >
                  <div class="btn-box" @click="numberInput(item)">
                    <dl v-if="index < 9">
                      <dt>{{ item.label }}</dt>
                      <dd>{{ item.desc }}</dd>
                    </dl>
                    <div class="btn-box" v-else>
                      <span>{{ item.label }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="ctrls">
                <el-button
                  type="warning"
                  size="mini"
                  v-if="telStatus == 0"
                  @click="telStatus = 1"
                  >拨打</el-button
                >
              </div>
            </div>
            <div class="mobile-teling" v-else>
              <div class="tel-panel">
                <div class="mobile-number">{{ inputNumber }}</div>
                <div class="tel-time">通话时长<br />00:01</div>
              </div>
              <div class="ctrls">
                <el-button type="primary" size="mini" @click="telStatus = 0"
                  >挂断</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :style="{ marginTop: '20px' }">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>通话记录</span>
          </div>
          <el-table v-loading="loading" :data="telRecords">
            <el-table-column label="通话号码" align="center" prop="tel" />
            <el-table-column
              label="部门/联系人"
              align="center"
              prop="nickName"
            />
            <el-table-column label="通话日期" align="center" prop="telDate" />
            <el-table-column label="呼出时间" align="center" prop="telTime" />
            <el-table-column
              label="通话时长"
              align="center"
              prop="telDuration"
            />
            <el-table-column label="通话录音" align="center" prop="aerodromeid">
              <template slot-scope="scope">
                <el-button type="text">下载</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
    <batch-call ref="batchCallDialog" />
    <call-set ref="callSetDialog" />
  </div>
</template>
<script>
import { treeselect } from "@/api/system/dept";
import { listUser } from "@/api/guard/addressbook";
import BatchCall from "./components/BatchCall.vue";
import CallSet from "./components/CallSet.vue";
export default {
  name: "DispatchMobile",
  components: { BatchCall, CallSet },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "deptName",
      },
      form: {},
      // 查询参数
      queryParams: {
        aerodromeid: null,
        filename: null,
      },
      // 总条数
      total: 10,
      loading: false,
      btns: [
        { label: "1", desc: "" },
        { label: "2", desc: "ABC" },
        { label: "3", desc: "DEF" },
        { label: "4", desc: "GHI" },
        { label: "5", desc: "JKL" },
        { label: "6", desc: "MNO" },
        { label: "7", desc: "PQRS" },
        { label: "8", desc: "TUV" },
        { label: "9", desc: "WXYZ" },
        { label: "*", desc: "WXYZ" },
        { label: "0", desc: "WXYZ" },
        { label: "#", desc: "WXYZ" },
      ],
      inputNumber: "",
      telStatus: 0,
      userQueryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      bookData: [],
      telRecords: [
        {
          tel: "13953679820",
          nickName: "杨初露",
          telDate: "2022年8月11日",
          telTime: "17:55:00",
          telDuration: "10:02",
        },
      ],
      selectedUsers: [],
    };
  },
  mounted() {
    this.getDept();
  },
  computed: {},
  methods: {
    getDept() {
      const that = this;
      treeselect().then((res) => {
        that.data = res.data;
      });
    },
    handleNodeClick(data) {
      this.userQueryForm.deptId = data.deptId;
      this.getUsers();
    },
    getUsers() {
      const that = this;
      listUser(this.userQueryForm).then((res) => {
        console.log(res);
        that.bookData = res.rows;
        that.total = res.total;
      });
    },
    onSubmit() {},
    getList() {},
    handleQuery() {},
    resetQuery() {},
    handleSelectionChange(val) {
      this.selectedUsers = val;
    },
    handleUpdate() {},
    handleDelete() {},
    numberInput(item) {
      this.inputNumber += item.label;
    },
    clearInputNumber() {
      this.inputNumber = "";
    },
    callNumber(number) {
      this.telStatus = 0;
      this.inputNumber = number;
    },
    handleBatchCall() {
      this.$refs.batchCallDialog.show(this.selectedUsers);
    },
    handleCallSet() {
      this.$refs.callSetDialog.show();
    },
  },
};
</script>
<style lang="scss" scoped>
.call-container {
  display: flex;

  .user-list {
    flex: 1;
  }

  .call-panel {
    margin-left: 20px;
    width: 320px;

    .mobile-box {
      background-color: #409eff;
      padding-top: 10px;
      width: 320px;
      height: 500px;

      .mobile-control,
      .mobile-teling {
        border-left: 10px solid #b3d8ff;
        border-right: 10px solid #b3d8ff;
        border-bottom: 10px solid #b3d8ff;
        box-sizing: border-box;
        color: white;
        position: relative;
        background-color: white;
        padding: 20px;
      }

      .number {
        display: flex;
        border-bottom: 2px dashed lightgrey;
      }

      .number input {
        border: 0;
        flex: 1;
        font-size: 24px;
        font-weight: 500;
        color: grey;
        letter-spacing: 3px;
        height: 50px;
        line-height: 50px;
        width: 100%;
      }

      .number input:disabled {
        background-color: white;
      }

      .number .el-button {
        background: none;
        border: 0;
        color: lightgrey;
      }

      .number input:focus-visible {
        border: 0;
        outline: 0;
      }

      .btns {
        display: flex;
        flex-flow: row;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 20px;
      }

      .btn-item {
        width: 33%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
      }

      .btn-box {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background-color: lightsalmon;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .btn-box:hover {
        cursor: pointer;
      }

      .btn-box dl,
      .btn-box dt,
      .btn-box dd {
        padding: 0;
        margin: 0;
        text-align: center;
      }

      .btn-box dt {
        font-size: 24px;
      }

      .btn-box dd {
        font-size: 12px;
      }

      .ctrls {
        text-align: center;
        margin-bottom: 20px;
        margin-top: 10px;
      }

      .tel-panel {
        height: 392px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        flex-flow: column;
      }

      .tel-panel .mobile-number {
        font-size: 32px;
        font-weight: 700;
        font-family: Arial, Helvetica, sans-serif;
        margin-bottom: 100px;
      }

      .tel-panel .tel-time {
        text-align: center;
        line-height: 26px;
      }
    }
  }
}

.title {
  margin-bottom: 10px;
  font-weight: bold;
  color: #409eff;
  display: flex;
  align-items: center;

  i {
    margin-right: 5px;
  }

  .tools {
    text-align: right;
    flex: 1;
  }
}
</style>
